<!-- 翻页模块 -->

<template>
  <div class="pagination">
    <el-button
      size="mini"
      icon="el-icon-arrow-left"
      @click="handlePrev"
      :disabled="current === pageData[0]"
    >上一页</el-button>

    <span v-for="i in pageData" class="page-item" :key="i">
      <el-button size="mini" type="text" v-if="current === i" :disabled="true">{{i}}</el-button>
      <el-button size="mini" type="text" v-else @click="() => handleClick(i)">{{i}}</el-button>
    </span>

    <el-button
      size="mini"
      @click="handleNext"
      :disabled="current === pageData[length - 1]"
    >
      下一页
      <i class="el-icon-arrow-right el-icon--right"></i>
    </el-button>
  </div>
</template>

<script>
  export default {
    props: {
      total: {type: Number},
      length: {type: Number, default: 5},
      defaultValue: {type: Number, default: 1},
      onChange: {type: Function, default: () => {}}
    },

    data() {
      return {
        current: this.defaultValue
      }
    },

    computed: {
      pageData: function() {
        const { current, total, length } = this
        let start = Math.max(0, current - 2)
        const end = Math.min(total, start + length)
        if (end - start < length) {
          start = Math.max(0, end - length)
        }

        return [...new Array(total)].map((_, i) => i + 1).slice(start, end)
      }
    },

    methods: {
      handleClick(current) {
        this.current = current

        this.onChange(this.current)
      },
      handlePrev() {
        this.current = Math.max(this.current - 1, 1)
        this.onChange(this.current)
      },
      handleNext() {
        this.current = Math.min(this.current + 1, this.total)
        this.onChange(this.current)
      }
    }
  }
</script>

<style scoped lang="less">
  .page-item {
    display: inline-block;
    margin: 0 5px;

    .is-disabled:hover {
      cursor: text !important;
    }
  }
</style>
